<template>
  <div class="notice" ref="cover">
    <div class="content">
      <h1 class="title">河北家乡棋牌</h1>
      <div class="notice_content" ref="notice"></div>
      <button class="disappear" @click="knowClick">知道了</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["msg"],
  watch: {
    msg() {
      if (this.msg) {
        this.$refs.cover.style.display = "block";
        return (this.$refs.notice.innerHTML = this.msg);
      }
    }
  },
  methods: {
    knowClick() {
      this.$refs.cover.style.display = "none";
    }
  }
};
</script>


<style scoped>
.notice {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  display: none;
}
.content {
  background-color: #fff;
  width: 90%;
  height: 85%;
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}
.title {
  background-color: #3cc0ff;
  color: #fff;
  font-size: 0.42rem;
  line-height: 1rem;
  text-align: center;
}
.disappear {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 0.36rem;
  text-align: center;
  color: var(--btn-color);
  line-height: 1rem;
  border-top: 0.01rem solid var(--border-color);
}
.notice_content {
  overflow-y: auto;
}
</style>

